<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const hostinfo = reactive({
      i: 1,
      userList: [],
      atten: true,
    });
    //路由跳转
    const router = useRouter();
    let chat_show = () => {
      router.push({
        path: "/chat",
      });
      window.localStorage.setItem(
        "userList",
        JSON.stringify(hostinfo.userList)
      );
    };
    let addatten = () => {
      console.log(111);
      if (hostinfo.atten) {
        hostinfo.atten = false;
        let follow = JSON.parse(window.localStorage.getItem("article_live"));
        let regard = JSON.parse(window.localStorage.getItem("regard"));
        regard.push(follow);
        window.localStorage.regard = JSON.stringify(regard);
      } else {
        hostinfo.atten = true;
        let id = JSON.parse(
          window.localStorage.getItem("article_live")
        ).matchId;
        let regard_two = JSON.parse(window.localStorage.getItem("regard"));
        let index = regard_two.findIndex((item) => item.matchId == id);
        regard_two.splice(index, 1);
        window.localStorage.regard = JSON.stringify(regard_two);
      }
    };
    onMounted(() => {
      hostinfo.userList = JSON.parse(window.localStorage.getItem("userList"));
      let id = JSON.parse(window.localStorage.getItem("article_live")).matchId;
      let regard_two = JSON.parse(window.localStorage.getItem("regard"));
      let index = regard_two.findIndex((item) => item.matchId == id);
      if (index == -1) {
        hostinfo.atten = true;
      } else {
        hostinfo.atten = false;
      }
    });
    return {
      ...toRefs(hostinfo),
      chat_show,
      addatten,
    };
  },
};
</script>

<template>
  <div class="container hostinfo">
    <div class="return">
      <i @click="$router.go(-1)" class="iconfont icon-zuobian"></i>
    </div>
    <div class="top">
      <div class="img">
        <img :src="userList.anchorAvatar" alt="" />
      </div>
      <div class="center">
        <p class="name">{{ userList.anchorName }}</p>
        <p class="roomnum">粉丝:153</p>
      </div>
      <div class="right">
        <i class="iconfont icon-xiaoxi" @click="chat_show"></i>
        <div class="add">
          <span v-show="atten" @click="addatten">关注</span>
          <span v-show="!atten" class="del" @click="addatten">取消关注</span>
        </div>
      </div>
    </div>

    <!-- tabs -->
    <div class="tabs">
      <ul>
        <li><span @click="i = 1" :class="{ active: i == 1 }">资料</span></li>
        <li><span @click="i = 2" :class="{ active: i == 2 }">动态</span></li>
      </ul>
    </div>

    <!-- 基本信息 -->
    <div class="infolist" v-show="i == 1">
      <h3>基本信息</h3>
      <ul>
        <li>
          <span class="left">房间号</span><span>{{ userList.roomId }}</span>
        </li>
        <li>
          <span class="left">爱好</span><span>{{ userList.sportName }}</span>
        </li>
        <li><span class="left">等级</span><span class="lev">Lv.1</span></li>
        <li><span class="left">IP属地</span><span>广东</span></li>
        <li><span class="left">性别</span><span>男</span></li>
        <li><span class="left">年龄</span><span>23</span></li>
        <li><span class="left">家乡</span><span>广州</span></li>
        <li>
          <span class="left">个性签名</span
          ><span>唱、跳、rap篮球，中分背带裤！！！</span>
        </li>
      </ul>
    </div>

    <!-- 主播动态 -->
    <div class="dynamic" v-show="i == 2">
      <h3>主播动态</h3>
      <div class="trends">
        <div class="trends-box">
          <div class="head">
            <img :src="userList.anchorAvatar" alt="" />
            <div class="title">
              <div class="name">{{ userList.anchorName }}</div>
              <div class="time">2022-11-30 20:02:23</div>
            </div>
          </div>
          <div class="content">明天nba继续</div>
          <div class="reply-box">
            <ul class="reply">
              <li>
                <div class="name">白驹:</div>
                <div class="talk">好的</div>
              </li>
            </ul>
          </div>
          <div class="footer-icon">
            <div class="zan">
              <i class="icon-31guanzhu1 iconfont"></i>

              <!-- <i
                      v-show="item.like"
                      class="icon-31guanzhu1xuanzhong iconfont"
                      style="color: red"
                    ></i> -->
              赞
            </div>
            <div class="pl">
              <i class="icon-comment_light iconfont"></i>
              评论
            </div>
          </div>
        </div>
      </div>
      <!-- <van-popup
            v-model="shows"
            position="bottom"
            :style="{ height: '12%' }"
          >
            <div class="reply-inp">
              <div class="head">想对 {{ username }} 说什么</div>
              <div class="inp">
                <input type="text" placeholder="我来评论" v-model="plValue" />
                <div class="btn" @click="plEnter">发表</div>
              </div>
            </div>
          </van-popup> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hostinfo {
  // background-color: #f9f8fd;
  .return {
    background-color: #e7f0f9;
    padding: 10px 15px;
  }
  .top {
    background-color: #e7f0f9;
    display: flex;
    padding: 28px 15px;
    .img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 8px;
      img {
        width: 100%;
      }
    }
    .center {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .name {
        font-weight: bold;
        font-size: 18px;
      }
      .roomnum {
        color: #787a82;
        font-size: 14px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      i {
        color: #fff;
        padding: 5px 12px;
        border-radius: 30px;
        background-color: #d7dce2;
        margin-right: 10px;
      }
      .add {
        span {
          display: inline-block;
          width: 78px;
          text-align: center;
          color: #fff;
          padding: 5px 15px;
          border-radius: 30px;
          font-size: 12px;
    background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);        }
        .del {
          background: #d7dce2;
        }
      }
    }
  }
  .line {
    height: 8px;
    background-color: #f4f5f7;
  }
  .infolist {
    border-top: 1px solid #f6f6f6;
    padding: 30px 30px 109px;
    background-color: #fff;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 0px 0 15px;
    }
    ul {
      li {
        display: flex;
        align-items: center;
        font-size: 13px;
        padding: 10px 0;
        color: #070707;
        .left {
          width: 26%;
          color: #565656;
        }
        .lev {
          display: inline-block;
    background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
          color: rgb(255, 255, 255);
          margin: 1px;
          font-weight: 600;
          font-size: 12px;
          border-radius: 2px;
          width: 40px;
          text-align: center;
        }
      }
    }
  }
  .tabs {
    ul {
      display: flex;
      background-color: #f6f7f8;

      li {
        flex: 1;
        text-align: center;
        height: 44px;
        line-height: 44px;
        color: #646566;
        font-size: 14px;
        position: relative;

        span {
          &.active {
            font-weight: 700;
            &::before {
              content: "";
              position: absolute;
              left: 0px;
              bottom: 0px;
              right: 0;
              height: 3px;
              margin: 0 auto;
              width: 10%;
              background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
  .dynamic {
    border-top: 1px solid #f6f6f6;
    background-color: #fff;
    padding: 30px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 0px 0 15px;
    }
    .trends-box {
      background: #fff;
      // border-radius: 8px;
      padding: 15px 0;
      border-bottom: 2px solid #f4f4f4;
      // margin-bottom: 10px;
      .head {
        display: flex;
        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
        .title {
          margin-left: 10px;

          .name {
            font-size: 12px;
            color: #181818;
          }
          .time {
            font-size: 10px;
            color: #b3b3b3;
          }
        }
      }
      .content {
        font-size: 14px;
        color: #3c3c3c;
        margin: 15px 0;
      }
      .reply-box {
        background: #f8f8f8;
        margin-bottom: 10px;
        border-radius: 10px;
        .reply {
          li {
            line-height: 25px;
            height: 25px;
            margin: 0 5px;
            padding: 0 8px;
            border-radius: 8px;
            display: flex;
            .head {
              margin-left: 100px;
              font-size: 12px;
              color: #999;
              .iconfont {
                font-size: 10px;
                margin-left: 4px;
              }
            }
            .name {
              color: #234477;
              font-size: 12px;
            }
            .talk {
              color: #b5b5b5;
              font-size: 12px;
            }
          }
        }
      }

      .footer-icon {
        display: flex;
        .iconfont {
          font-size: 18px;
          vertical-align: -2px;
        }
        .pl {
          height: 18px;
          line-height: 16px;
          font-size: 10px;
          color: #999;
        }
        .zan {
          margin-right: 20px;
          line-height: 16px;
          height: 18px;
          font-size: 10px;
          color: #999;
        }
      }
    }
    // 回复弹窗
    .reply-inp {
      margin: 10px 20px;
      .head {
        color: #c3c3c3;
        font-size: 12px;
      }
      .inp {
        display: flex;
        margin: 11px 0 0;
        align-items: flex-end;
        justify-content: space-between;
        input {
          width: 262px;
          height: 30px;
          line-height: 30px;
          border-radius: 6px;
          font-size: 14px;
          padding: 0 10px;
          color: #757575;
          background: #f2f2f4;
          outline: none;
          border: none;
        }
        .btn {
          width: 56px;
          font-size: 12px;
          border-radius: 6px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          color: #fff;
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
        }
      }
    }
  }
}

::v-deep .van-tabs__line {
  background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
}

::v-deep .van-tab {
  background-color: #f6f7f8;
}
</style>
